<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item :index="item.path" :key="item.path" v-for="item in list" @click="getIndex(item.path)">{{ item.title }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeIndex: "video",
      list: [
        {
          title: "视频案例",
          path: "video",
        },
        {
          title: "实战案例",
          path: "project",
        },
        {
          title: "工作案例",
          path: "work",
        },
      ],
    }
  },
  methods: {
    getIndex(val) {
      this.activeIndex = val
      this.$store.commit("setHeaderIndex", val)
    },
  },
}
</script>
<style lang="less" scoped></style>
